<template>
    <el-dialog v-model="showProgress" :title="progressTitle" center width="400" align-center :show-close="false" :close-on-click-modal="false">
        <el-progress :percentage="percentage" :text-inside="true" :stroke-width="15" striped :striped-flow="stripedFlow" :duration="duration"/>
        <div v-show="errmsg.length" class="errmsg">
            <div v-for="item in errmsg">{{item}}</div>
        </div>
        <slot name="message"></slot>
        <template #footer>
            <div class="dialog-footer">
                <el-button v-show="endError" type="primary" @click="showProgress = false">关闭</el-button>

                <slot name="footer"></slot>
                <!--<div v-show="isShowStopBtn">
                    <el-button v-show="!isUploadStop" type="primary" @click="stopUpload">停止</el-button>
                    <el-button v-show="isUploadStop" type="default" @click="showProgress = false">关闭</el-button>
                </div>-->
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
  import {defineProps,defineEmits,watch,reactive,ref,computed,defineExpose} from 'vue'

  const percentage = ref(0),
    duration = computed(() => Math.floor(percentage.value / 5)),    //控制动画进度条速度和条纹进度条流动速度
    errmsg = ref([]),
    endError = ref(false),
    progressTitle = ref(''),    // 标题
    stripedFlow = ref(true);    // 让进度条上的条纹流动起来
  let showProgress = ref(false);

  // 显示
  const show = () => {
    showProgress.value = true;
  }
  // 关闭
  const close = () => {
    showProgress.value = false;
  }

  /**
   * 设置进度条
   * @param type 类型 success 成功/error 出错/loading 开始加载 /
   * @param title 标题
   * @param msg 提示信息错误信息
   */
  const setProgress = (type,title,msg) => {
    showProgress.value = true;
    progressTitle.value = title;
    stripedFlow.value = type === 'loading';
    endError.value = type === 'error';
    // 失败
    if (type === 'success'){
      let timer = setTimeout(() =>{
        showProgress.value = false;
        clearTimeout(timer);
      },2000)
    }
    if (type === 'loading'){
      percentage.value = 0;
      errmsg.length = 0;
    }
    if (msg){
      errmsg.value = msg;
    }
  }
  const setPercentage = (percent) =>{
    percentage.value = percent;
  }

  defineExpose({show,close,setProgress,setPercentage})

</script>

<style scoped>

</style>
